The opening animation was dynamically published—the images that flickered through the map previewed the works of art that were to be featured in the following week's episodes.
Watch
The “Watch” portion of each episode, while playing like a video, is in fact a succession of still image files, controlled and displayed with Javascript. We created custom editing tools in the Drupal admin area that allowed Museum staff to create & edit each episode in the CMS, controlling the timing and sequence of images, as well as their transitions and movement.
Explore
The “Explore” portion of each episode is composed of a unique interactive feature, two of which are shown here. The top screen shows a tool that allows users to compare three versions of a drypoint etching by Rembrandt by dragging a slider left-right. In the bottom example, a timed audio slideshow illustrates the segments that make up the calligraphic emblem of Sultan Süleyman the Magnificent. CHIPS developed a set of toolkits and templates that equipped Museum staff to produce most of these interactives in-house.
Responsive and device-agnostic
The site was designed and developed with touch-devices in mind. The layouts are fully responsive and feature a number of device-specific considerations, like changing the wording in the helper text from “mouse” to “finger” in the examples shown above.
Icon font
We created a web-font for the various icons and logos used throughout the site. This ensures crisp display on retina screens, allows us to change color and size on-the-fly via CSS, and is smaller in file size than a sprite image typically used for the same purposes.
